<template>
	<view>
		<view v-if="getEnv">
			<template v-if="tokenValue">
				<view class="Order-goods">
					<view class="header">
						<view class="tab">
							<text v-for="(item, index) in titleList" class="tab-title" :key="index" @click="tabkeys(index)">
								<text :class="titleNum == index ? 'active' : ''">{{ item }}</text>
							</text>
						</view>
					</view>
					<!-- 外卖定单 -->
					<view class="main" v-if="titleNum == 0">
						<!-- 外送，自提 -->
						<view class="main-header">
							<view class="twoTitle">
								<view class="twoTitle-item" v-for="(item, index) in listChilren" :key="index" @click="tabTwoNav(index)">
									<text :class="tabTwoNavNum == index ? 'actives' : ''">{{ item }}</text>
								</view>
							</view>
						</view>

						<view class="">
							<view class="take-out">
								<view class="main-item" v-for="item in  arr " :key="item.order_id">
									<view class="main-item-time">
										订单创建时间：{{ item.create_time | formatTime }}
									</view>
									<view class="main-item-header flexjcsb">
										<view class="main-item-header-title">
											<view class="">
												<image :src="'https://songcan.xyct1688.com/' + item.site_info.logo" mode="">
												</image>
											</view>
											<view class="title-main">
												<view class="">
													<view class="title-main-title">
														{{ item.site_name }}
													</view>
													<view class="title-main-preferential">
														<view class="title-main-preferential-item" v-for="i in item.site_info.manjian" :key="index">
															<view class="flexjcc">
																满{{ i.money }}减{{ i.discount_money }}
															</view>
														</view>
													</view>
												</view>
												<view class="title-main-right"
													:class="item.order_status !== 4 && item.order_status !== 10 && item.order_status !== -1 ? 'title-main-rightSelected' : 'title-main-right'">
													<text>{{ item.order_status_name }}</text><uni-icons type="forward" size="25rpx"></uni-icons>
												</view>
											</view>
										</view>
									</view>
									<view class="main-item-footer flexjcsb" @click="JumpOrderGoodsInformation(item)">
										<view class="commodity">
											<view class="commodity-item" v-for="i in item.order_goods" :key="i.goods_id">
												<view class="">
													<image :src="'https://songcan.xyct1688.com/' + i.sku_image" mode="">
													</image>
												</view>
												<view class="commodity-item-title">
													{{ i.goods_name }}
												</view>
											</view>
										</view>
										<view class="priceNum">
											<view class="">
												￥<text>{{ (Number(item.goods_money)
													+ Number(item.delivery_money ? item.delivery_money : 0)
													+ Number(item.pack_money ? item.pack_money : 0)
												).toFixed(2) }}</text>
											</view>
											<view class="">
												共 <text>{{ item.goods_num }}</text> 件
											</view>
										</view>

									</view>
									<view class="main-item-button">
										<!-- 
										订单状态-外卖：
											order_status
												退款成功：-1
												已关闭：-1
												待发货：1
												申请退款：1
												等待退款：1
											refund_status
										订单状态-自提：
											order_status
												待提货：2
												已关闭：-1
												待支付：0
												已完成：10
												等待退款：2
											refund_status
												待提货：0
									 -->
										<view class=""
											v-if="(item.order_status == 4 || item.order_status == 10) && item.evaluate_status_name != '已评价'">
											<view class="solid flexjcc last" @click.native="JumpEvaluate(item)">
												去评价
											</view>
										</view>
										<view class="" v-if="item.order_status == 0 && item.pay_status == 0">
											<view class="solid flexjcc last" @click="topay(item)">
												去支付
											</view>
										</view>
										<view class="" v-if="item.order_status > 1 && item.order_status != 4 && item.order_status != 10
											&& tabTwoNavNum != 1">
											<view class="solid flexjcc last" @click="MakingPhoneCalls(item)">
												联系骑手
											</view>
										</view>
										<view v-if="item.order_goods[0].refund_status == 0">
											<view class="" v-if="tabTwoNavNum == 1 && item.order_status == 2">
												<view class="AnotherOrder flexjcc last" @click="open(item)">
													取消订单
												</view>
											</view>
										</view>

										<view class="" v-if="item.order_goods[0].refund_status == 0">
											<view class="" v-if="item.order_status == 0">
												<view class="AnotherOrder flexjcc last" @click="open(item)">
													取消订单
												</view>
											</view>
											<view class="" v-if="item.order_status == 1">
												<view class="AnotherOrder flexjcc last" @click="open(item)">
													取消订单
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<u-loadmore :status="status" />
						</view>
					</view>
					<u-popup v-model="showPop" mode="bottom" border-radius="40" @close="close">
						<view style="display: flex;flex-direction: column;width: 100%;text-align: center;">
							<view style="display: flex;flex-direction: row;justify-content: space-between;padding: 30rpx;">
								<view style="font-weight: bold;font-size: 18px;">
									选择取消原因
								</view>
								<view style="font-size: 18px;color:#F14500 ;" @click="toCancelOrders()">
									确定
								</view>
							</view>

							<view style="font-size: 16px;">
								<picker-view class="picker-view" @change="bindPickerChange">
									<picker-view-column>
										<view class="picker-view__item" v-for="( rangeItem, rangeIndex ) in  pickerArray " :key="rangeIndex">
											{{ rangeItem }}
										</view>
									</picker-view-column>
								</picker-view>
								<!-- <picker mode="selector" @change="bindPickerChange"
					     :value="pickerIndex" :range="pickerArray">
						<view class="uni-input">{{pickerArray[pickerIndex]}}</view>
					</picker> -->
							</view>
						</view>
					</u-popup>
					<!-- 跑腿/搬运订单 -->
					<view v-if="titleNum == 1">
						<!-- <runErrands></runErrands> -->
						<runErrandsTransport ref="runErrandsTransportRef"></runErrandsTransport>
					</view>

				</view>
			</template>
			<template v-else>
				<view class="yelogin">
					<image src="../../static/noLogin.png" mode=""></image>
					<view>您当前换为登录，<text @tap="toLogin">去登录</text></view>
				</view>
			</template>
			<!-- 支付弹窗 -->
			<u-popup v-model="popups" mode="bottom" border-radius="40">
				<view class="popups-content">
					<view style="text-align: center;">
						支付方式
					</view>
					<view class="">
						<uni-data-checkbox v-model="modeOfPayment" :localdata="paymentamount"></uni-data-checkbox>
					</view>
					<view class="payment-button">
						<button @click="immediatePayment">立即支付</button>
					</view>
				</view>
			</u-popup>
		</view>
		<DeceiveOrdergoods v-else></DeceiveOrdergoods>
	</view>
</template>

<script>
import DeceiveOrdergoods from "@/components/Deceive/DeceiveOrdergoods.vue";
import getEnv from "@/utils/getEnv.js";
// import OutwardDelivery from '../../components/orderForGoods/OutwardDelivery.vue'
// import SelfPickup from "../../components/orderForGoods/SelfPickup.vue"
// import runErrands from "../../components/orderForGoods/runErrands.vue"
import PayKeyboard from '@/components/PayKeyboard/index.vue'

import runErrandsTransport from "./runErrandsTransport.vue"

const $api = require('@/utils/request.js').API
export default {
	components: {
		runErrandsTransport,
		PayKeyboard,
		DeceiveOrdergoods
	},
	data() {
		return {
			getEnv: getEnv(),
			titleList: ["外卖订单", "跑腿/搬运订单"],
			titleNum: 0, // 外卖订单，跑腿/搬运订单的状态
			listChilren: ["外送", "自提"],
			tabTwoNavNum: 0, // 外送，自提的状态
			arr: [],
			// 外卖列表
			takeOutList: [],
			// 自提列表
			pickList: [],

			page_count: 0,

			status: 'loading',
			page: 1,
			showPop: false,
			pickerIndex: null,
			pickerArray: [],
			cancelOrderObj: null,

			tokenValue: false,
			popups: false,
			payShow: false,
			modeOfPayment: 0,
			// 支付列表
			paymentamount: [{
				text: '微信支付',
				value: 0
			},
			],
			out_trade_no: ''
		}
	},
	onLoad() { },
	onShow() {
		if (!uni.getStorageSync('token')) {
			this.tokenValue = false
		} else {
			this.tokenValue = true
			this.page = 1
			if (this.tabTwoNavNum == 0) {
				this.orderGoods(3)
			} else {
				this.orderGoods(2)
			}
			this.closeOrderReasonFun();
		}
	},
	onReachBottom() {
		if (this.page > this.page_count) {
			this.status = 'nomore'
		} else {
			this.page = this.page + 1

			if (this.tabTwoNavNum == 0) {
				this.orderGoods(3)
			} else {
				this.orderGoods(2)
			}
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') { // 来自页面内分享按钮

		}
		return {
			title: '校宇通',
			path: '/pages/index/index'
		}
	},
	onShareTimeline(res) {
		return {
			title: '校宇通',
			path: '/pages/index/index'
		}
	},
	// 监听下拉刷新
	onPullDownRefresh() {
		if (this.titleNum == 0) {
			// 初始化数据
			this.page = 1
			this.takeOutList = []
			this.pickList = []
			if (this.tabTwoNavNum == 0) {
				this.orderGoods(3)
			} else {
				this.orderGoods(2)
			}
		} else {
			this.$refs.runErrandsTransportRef.getList()
		}

	},
	methods: {
		//获取余额支付支付密码
		getPayWordpass(wordpass) {
			$api.checkpaypassword({ pay_password: wordpass }).then(res => {
				$api.postOrderGoodsPayment({
					out_trade_no: this.out_trade_no,
					pay_type: 'BALANCE',
					is_matched: 0,
				}).then(res => {
					this.payShow = false
					uni.navigateTo({
						url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 1
					})
				})
			}).catch(err => {
				console.log(err);
			})
		},
		closeOrderReasonFun() {
			$api.closeOrderReason({}).then(res => {
				this.pickerArray = res.data.data;
			})
		},
		bindPickerChange(e) {
			this.pickerIndex = e.detail.value[0]
		},
		AnotherOrder(item) {
			$api.postOrderGoodsPayment({
				out_trade_no: item.out_trade_no,
				pay_type: 'wechatpay',
				is_matched: 0,
			}).then(res => {
				let obj = res.data.data.data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: obj.timeStamp,
					nonceStr: obj.nonceStr,
					package: obj.package,
					signType: obj.signType,
					paySign: obj.paySign,
					success: function (res) {
						uni.navigateTo({
							url: '../../pages/Paymentcompletion/Paymentcompletion?source=' +
								1
						})
					},
					fail: function (err) {
						// uni.navigateTo({
						// 	url: '../../pages/Paymentcompletion/Paymentcompletion?source=' + 2
						// })
					}
				})
			})
		},
		open(item) {
			// this.$refs.popup.open('bottom')
			this.cancelOrderObj = item;
			this.showPop = true;
		},
		close() {
			this.cancelOrderObj = null;
		},
		// 确认取消订单
		toCancelOrders() {
			var _this = this;
			uni.showModal({
				title: '您确定要取消此订单吗？',
				success: function (res) {
					if (res.confirm) {
						// 外卖
						if (_this.tabTwoNavNum == 0) {
							if (_this.cancelOrderObj.order_status == 0) {
								$api.closeOrder({
									order_id: _this.cancelOrderObj.order_id,
									close_reason: _this.pickerArray[_this.pickerIndex],
								}).then(res => {
									if (res.data.code == 0) {
										uni.showToast({
											title: '操作成功',
											duration: 2000
										})
										_this.cancelOrderObj = null;
										_this.showPop = false;
										_this.orderGoods(3)
									} else {
										uni.showToast({
											title: res.data.message,
											duration: 2000
										})
									}

								})
							} else if (_this.cancelOrderObj.order_status == 1) {
								// 取消订单审核
								$api.closeOrderToAuth({
									order_id: _this.cancelOrderObj.order_id,
									refund_reason: _this.pickerArray[_this.pickerIndex],
								}).then(res => {
									if (res.data.code == 0) {
										uni.showToast({
											title: '已提交审核，请误重复提交',
											duration: 2000
										})
										_this.cancelOrderObj = null;
										_this.showPop = false;
										_this.orderGoods(3)
										// _this.onPullDownRefresh()
									} else {
										uni.showToast({
											title: res.data.message,
											duration: 2000
										})
									}
								})
							}
							// 自提
						} else {
							if (_this.cancelOrderObj.order_status == 0) {
								$api.closeOrder({
									order_id: _this.cancelOrderObj.order_id,
									close_reason: _this.pickerArray[_this.pickerIndex],
								}).then(res => {
									console.log(res, '取消订单');
									if (res.data.code == 0) {
										uni.showToast({
											title: '操作成功',
											duration: 2000
										})
										_this.cancelOrderObj = null;
										_this.showPop = false;
										_this.orderGoods(2)
									} else {
										uni.showToast({
											title: res.data.message,
											duration: 2000
										})
									}

								})
							} else if (_this.cancelOrderObj.order_status == 2) {
								// 取消订单审核
								$api.closeOrderToAuth({
									order_id: _this.cancelOrderObj.order_id,
									refund_reason: _this.pickerArray[_this.pickerIndex],
								}).then(res => {
									if (res.data.code == 0) {
										uni.showToast({
											title: '已提交审核，请误重复提交',
											duration: 2000
										})
										_this.cancelOrderObj = null;
										_this.showPop = false;
										_this.orderGoods(2)
									} else {
										uni.showToast({
											title: res.data.message,
											duration: 2000
										})
									}
								})
							}
						}
					} else if (res.cancel) {
						_this.cancelOrderObj = null;
						_this.showPop = false;
					}
				}
			})
		},
		// 获取列表
		async orderGoods(order_type) {
			$api.postOrderGoods({
				page: this.page,
				order_type: order_type,
			}).then(res => {
				let {
					list,
					page_count
				} = res.data.data
				this.page_count = page_count
				if (this.page == 1) {
					if (order_type == 3) {
						this.takeOutList = list
					}
					if (order_type == 2) {
						this.pickList = list
					}
					this.status = 'loadmore'
				} else {
					if (order_type == 3) {
						this.takeOutList = [...this.takeOutList, ...list]
					}
					if (order_type == 2) {
						this.pickList = [...this.pickList, ...list]
					}
					this.status = 'loadmore'
				}
				if (res.data.data.list && res.data.data.list.length == 0) {
					this.status = 'nomore'
				}
				this.showList()
				uni.stopPullDownRefresh();
			})
		},
		topay(item) {
			this.popups = true
			this.out_trade_no = item.out_trade_no
		},
		// 立即支付
		immediatePayment() {
			// 微信支付
			$api.postOrderGoodsPayment({
				out_trade_no: this.out_trade_no,
				pay_type: 'wechatpay',
				is_matched: 0,
			}).then(res => {
				let obj = res.data.data.data
				this.popups = false
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: obj.timeStamp,
					nonceStr: obj.nonceStr,
					package: obj.package,
					signType: obj.signType,
					paySign: obj.paySign,
					success: function (res) {
						uni.navigateTo({
							url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 1
						})
					},
					fail: function (err) {
						uni.navigateTo({
							url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 2
						})
					}
				});
			})

		},
		JumpOrderGoodsInformation(item) {
			if (this.tabTwoNavNum == 0) {
				uni.navigateTo({
					url: './OrderingInformation?item=' + JSON.stringify(item) + '&source=' + 1
				})
			} else {
				uni.navigateTo({
					url: './OrderingInformation?item=' + JSON.stringify(item) + '&source=' + 2
				})
			}
		},
		// 跳转去评价
		JumpEvaluate(item) {
			if (this.tabTwoNavNum == 0) {
				uni.navigateTo({
					// url:'/pages/Ordergoods/evaluate'
					url: '../../pages/Ordergoods/evaluate?item=' + JSON.stringify(item) + '&source=' + 0
				})
			} else {
				uni.navigateTo({
					url: '../../pages/Ordergoods/evaluate?item=' + JSON.stringify(item) + '&source=' + 1
				})
			}
		},
		// 外卖订单，跑腿/搬运订单
		tabkeys(index) {
			// if (index == 1) {
			// 	uni.navigateTo({
			// 		url: '/pages/construction/construction'
			// 	})
			// } else {
			this.titleNum = index;
			// }
		},
		// 外送/自提
		tabTwoNav(index) {
			this.tabTwoNavNum = index
			this.showList()
			if (index == 0) {
				// this.pickList = []
				this.page = 1
				this.orderGoods(3)
			} else {
				// this.takeOutList = []
				this.page = 1
				this.orderGoods(2)
			}
		},
		// 拨打电话
		MakingPhoneCalls(item) {
			uni.makePhoneCall({
				phoneNumber: item.delivery_member_info.mobile
			})
		},

		// 展示要显示的数据
		showList() {
			switch (this.tabTwoNavNum) {
				case 0: {
					this.arr = this.takeOutList
					break
				}
				case 1: {
					this.arr = this.pickList
					break
				}
			}
		},
		toLogin() {
			uni.navigateTo({
				url: '../../pages_login/login/login'
			})
		}
	}
}
</script>

<style lang="less" scoped>
.Order-goods {
	width: 100%;
	height: 100%;
	background-color: #FBFBFB;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;

	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		// color: $u-content-color;
		font-size: 28rpx;
	}

	// 选中样式
	.actives {
		color: #F14500;
		border-bottom: 4rpx solid #F14500;
	}

	.header {
		padding-bottom: 60rpx;
	}

	.tab {
		position: fixed;
		width: 100%;
		height: 60rpx;
		top: 0;
		z-index: 9;
		line-height: 60rpx;
		background-color: #fff;

		.tab-title {
			height: 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #202020;
			margin-left: 148rpx;
			margin-bottom: 29rpx;
		}

		.active {
			color: #F14500 !important;
		}
	}

	.main-header {
		padding-bottom: 100rpx;
	}

	.twoTitle {
		position: fixed;
		top: 60rpx;
		display: flex;
		width: 100%;
		z-index: 9;
		background: #FBFBFB;

		.twoTitle-item {
			height: 100rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3F3F3F;
			padding: 28rpx 68rpx;
		}
	}
}

// 外卖大盒子
.take-out {
	width: 702rpx;
	height: 100%;
	background-color: #FBFBFB;
	margin-left: 23rpx;

	.main-item {
		width: 702rpx;
		// height: 258rpx;
		background: white;
		// background: aqua;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(118, 118, 118, 0.09);
		border-radius: 10rpx;
		margin: auto;
		margin-bottom: 12rpx;

		// 已完成
		.ash {
			color: #888888;
		}

		// 待支付，骑手正在送货中，退款成功，商家已接单
		.orange {
			color: #F14500;
		}

		.main-item-time {
			padding: 23rpx 26rpx 26rpx 25rpx;
		}

		// 头部
		.main-item-header {
			display: flex;
			// padding: 43rpx 26rpx 26rpx 25rpx;
			padding: 23rpx 26rpx 26rpx 25rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				background: #FFEEE5;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}

			// 标题
			.main-item-header-title {
				display: flex;
				width: 100%;

				.title-main {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.title-main-title {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #2C2C2C;
						padding-bottom: 25rpx;
					}

					.title-main-right {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #888888;
					}

					.title-main-rightSelected {
						color: #F14500;
					}

					.title-main-preferential {
						display: flex;

						.title-main-preferential-item {
							view {
								// width: 120rpx;
								height: 30rpx;
								border: 1px solid #E54202;
								opacity: 0.52;
								border-radius: 3rpx;
								font-size: 18rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #E54202;
								padding: 5rpx 10rpx;
							}

							view:last-child {
								margin-left: 7rpx;
							}
						}
					}
				}
			}
		}

		// 商品展示和价格
		.main-item-footer {
			padding: 0 26rpx 0 26rpx;

			// 商品
			.commodity {
				display: flex;

				.commodity-item {
					width: 118rpx;
					// box-shadow: 0rpx 17rpx 30rpx 0rpx rgba(102,70,8,0.15);
					border-radius: 10rpx;
					margin-right: 16rpx;

					image {
						width: 118rpx;
						height: 100rpx;
					}

					.commodity-item-title {
						font-size: 20rpx;
						// font-weight: 400;
						color: #202020;
						// padding-bottom: 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			// 价格
			.priceNum {
				text-align: right;

				view:first-child {
					font-size: 24rpx;
					// font-weight: 400;
					color: #373737;
					padding-bottom: 15rpx;

					text {
						font-size: 30rpx;
					}
				}

				view:last-child {
					font-size: 20rpx;
					font-weight: 300;
					color: #888888;
				}
			}
		}

		.main-item-button {
			display: flex;
			justify-content: flex-end;
			margin-top: 18rpx;

			view {
				display: flex;
			}

			.last {
				margin: 0 27rpx 19rpx 14rpx;
			}

			// 再来一单按钮
			.AnotherOrder {
				width: 156rpx;
				height: 60rpx;
				border: 1px solid #F14500;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #F14500;
			}

			// 去评价，去支付，联系骑手
			.solid {
				width: 155rpx;
				height: 59rpx;
				background: #F14500;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
			}
		}
	}
}

.picker-view {
	width: 750rpx;
	height: 600rpx;
}

.item {
	line-height: 100rpx;
	text-align: center;
}

.yelogin {
	width: 640rpx;
	margin: auto;
	text-align: center;

	image {
		width: 640rpx;
		height: 480rpx;
	}

	text {
		color: #F14500;
	}
}

// 支付弹窗
.popups-content {
	width: 750rpx;
	position: relative;
	border-radius: 40px;
	padding-top: 30rpx;


	::v-deep .checklist-group {
		width: 100%;
		height: 80rpx;
		margin: 20rpx 30rpx;

		.checklist-box {
			display: block;
			width: 100%;
			height: 49.3rpx;
			margin-bottom: 30rpx;

			.checklist-content {
				float: left;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 121rpx;
			}

			.radio__inner {
				float: right;
			}
		}

		.is-checked {
			color: #F14500 !important;
		}
	}

	.payment-button {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 62rpx 0;
		margin-top: 80rpx;

		button {
			width: 664.4rpx;
			height: 88.5rpx;
			background-color: #f14500;
			color: #fff;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 44rpx;
			line-height: 88.5rpx;
		}
	}
}
</style>